// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: bus_station
    width: 400
    height: 500

    //    Rectangle {
    //        id: rectangle_bg
    //        color: "#021e69"
    //        anchors.fill: parent
    //    }

    function hide()
    {
        mmultitextinput1.hide();
    }

    MMultiTextInput {
        id: mmultitextinput1
        x: 40
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 0
        text: "请输入要搜索的站点"

        onSearch: backend.bus_station(mmultitextinput1.text_input, data_map.citycode);
    }

    Keys.onReturnPressed:
    {
        //backend.search_poi(mmultitextinput1.text_input);
        backend.bus_station(mmultitextinput1.text_input, data_map.citycode);
    }

    Item {
        id: item_result
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.top: mmultitextinput1.bottom
        anchors.topMargin: 20

        ListView {
            id: list_view_result
            x: 0
            width: parent.width
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            spacing: 10

            delegate: Item {
                x: 5
                height: 42
                width: parent.width

                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
                        backend.bus_line(line_id, data_map.citycode);
                        item_detail.line_name = name;
                        item_detail.start_time = start_time.substring(0,2) + ":" + start_time.substring(2,4);
                        item_detail.end_time = end_time.substring(0,2) + ":" + end_time.substring(2,4);
                        item_detail.line_length = length;
                        bus_station.state == "" ? bus_station.state = "detail" : bus_station.state = "" ;
                    }
                }

                Row {
                    id: row1
                    spacing: 10

                    Rectangle {
                        width: 40
                        height: 40
                        color: "#00000000"
                        border.color: "lightblue"
                        border.width: 2
                        radius: 40
                        smooth: true

                        Text
                        {
                            anchors.centerIn: parent
                            color: "white"
                            font.pixelSize: 18
                            text: index + 1
                        }
                    }

                    Text {
                        text: name
                        width: list_view_result.width - 50
                        anchors.verticalCenter: parent.verticalCenter
//                        font.bold: true
                        font.pixelSize: 26
                        color: "white"
                        elide: Text.ElideRight
                    }
                }
            }
            model: data_map.get_model_busstation()
        }

        Item {
            id: item_detail
            width: parent.width
            anchors.left: list_view_result.right
            anchors.leftMargin: 20
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0

            property string line_name : "test"
            property string start_time: "00:00"
            property string end_time: "00:00"
            property string line_length: "test"

            Item {
                id: item_line_detail
                x: 0
                y: 0
                height: 95
                clip: true
                anchors.top: parent.top
                anchors.topMargin: 0
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0

                Column {
                    id: column1
                    anchors.fill: parent

                    Row {
                        id: row4
                        height: parent.height / 2
                        spacing: 0
                        anchors.top: parent.top
                        anchors.topMargin: 0
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        anchors.left: parent.left
                        anchors.leftMargin: 0

                        Item {
                            id: item1
                            x: 0
                            width: 50
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 0
                            anchors.top: parent.top
                            anchors.topMargin: 0

                            MouseArea {
                                anchors.fill: parent

                                onClicked:
                                {
//                                    bus_station.state == "" ? bus_station.state = "detail" : bus_station.state = "" ;
                                }
                            }
                        }

                        Text {
                            id: text1
                            x: 105
                            y: 16
                            color: "#ffffff"
                            text: "" + item_detail.line_name
                            verticalAlignment: Text.AlignVCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: 26
                        }

                    }

                    Row {
                        id: row5
                        height: parent.height / 2
                        spacing: 15
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        anchors.left: parent.left
                        anchors.leftMargin: 0

                        Text {
                            id: text2
                            x: 32
                            y: 16
                            color: "#ffffff"
                            text: "首末时间：" + item_detail.start_time + " -- " + item_detail.end_time
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: 20
                        }

                        Text {
                            id: text3
                            x: 32
                            y: 20
                            color: "#ffffff"
                            text: "全长：" + item_detail.line_length + "公里"
                            font.pixelSize: 20
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }


                }
            }

            ListView {
                id: list_view_line_detail
                clip: true
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 10
                anchors.top: item_line_detail.bottom
                anchors.topMargin: 10
                anchors.right: parent.right
                anchors.rightMargin: 10
                anchors.left: parent.left
                anchors.leftMargin: 10
                spacing: 5

                delegate: Item {
                    x: 5
                    height: 42
                    width: parent.width

                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            backend.draw_bus_line_station(poi_x, poi_y, stationNum, name, item_detail.line_name);
                        }
                    }

                    Row {
                        id: row2
                        spacing: 10

                        Rectangle {
                            width: 40
                            height: 40
                            color: "#00000000"
                            border.color: "lightblue"
                            border.width: 2
                            radius: 40
                            smooth: true

                            Text
                            {
                                anchors.centerIn: parent
                                color: "white"
                                font.pixelSize: 18
                                text: index + 1
                            }
                        }

                        Text {
                            text: name
                            width: list_view_result.width - 50
                            anchors.verticalCenter: parent.verticalCenter
    //                        font.bold: true
                            font.pixelSize: 22
                            color: "white"
                            elide: Text.ElideRight
                        }
                    }
                }
                model: data_map.get_model_busline()
            }

            ArrowButton {
                id: arrowbutton1
                x: -30
                y: -30
                smooth: true
                scale: 0.400
                rotation: 180

                onArrow_clicked: bus_station.state == "" ? bus_station.state = "detail" : bus_station.state = "" ;
            }

            //            Rectangle {
            //                id: rectangle1
            //                x: 39
            //                y: 66
            //                width: 200
            //                height: 200
            //                color: "#ffffff"

            //                MouseArea {
            //                    id: mouse_area1
            //                    anchors.fill: parent

            //                    onClicked:
            //                    {
            //                        bus_station.state == "" ? bus_station.state = "detail" : bus_station.state = "" ;
            //                    }
            //                }
            //            }
        }
    }


    states: [
        State {
            name: "detail"

            PropertyChanges {
                target: list_view_result
                x: -width - 20
            }

            PropertyChanges {
                target: row4
                height: parent.height / 2
            }

            PropertyChanges {
                target: text1
                opacity: 1
            }

            PropertyChanges {
                target: text2
                opacity: 1
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "detail"
            ParallelAnimation {
                //                    PropertyAnimation { target: item_content; property: "opacity"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: mtextinput1; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: list_view_result; property: "x"; easing.type: Easing.OutCubic;}
            }
        },
        Transition {
            from: "detail"
            to: ""
            ParallelAnimation {
                PropertyAnimation { target: list_view_result; property: "x"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: mtextinput1; property: "height"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: item_content; property: "opacity"; easing.type: Easing.OutCubic;}
            }
        }
    ]
}
